import { FC, useState } from "react";

interface Props {}
const Index: FC<Props> = () => {
  const [name, setName] = useState("");
  const [list, setList] = useState<TODOS.Todo[]>([
    { name: "王思琪", age: 99 },
    { name: "张帅", age: 1888 },
    { name: "刘帅", age: 18 },
  ]);

  const onAdd = () => {
    list.push({
      name,
      age: 666,
    });

    // setList(list)
    setList([...list]);
  };

  const onDelete = (item: TODOS.Todo, i: number) => {
    // 语法： 数组.splice(索引, 个数)
    // 作用： 根据索引删除数据
    list.splice(i, 1);
    setList([...list]);
  };

  return (
    <fieldset>
      <legend>TODOS</legend>

      <input
        type="text"
        value={name}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setName(e.target.value);
        }}
      />
      <button onClick={onAdd}>追加</button>

      <ul>
        {list.map((item: TODOS.Todo, i: number) => {
          return (
            <li key={i}>
              {item.name}
              <button onClick={() => onDelete(item, i)}>删除</button>
            </li>
          );
        })}
      </ul>
    </fieldset>
  );
};

export default Index;
